<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title></title>
  <th:block th:include="common/pub_head :: default"></th:block>
  <th:block th:include="common/pub_head :: layui"></th:block>

  <style>
    .time-range {
      width: 97%;
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 4px 5px;
      height: 300px;
      overflow: auto;
      margin-bottom: 5px;
    }

    .time-col {
      margin: 5px 0;
    }

    .time-label {
      margin: 0 10px 0 20px;
    }

    .time-add {
      position: absolute;
      top: 120px;
      right: 35px;
    }

    .time-del {
      color: red;
    }

    .time-del:hover {
      cursor: pointer;
      font-weight: bold;
    }
    .time-input {
      width: 130px;
    }
  </style>
</head>
<body class="container" style="padding: 4px 5px">
<form class="layui-form layui-form-pane" id="list_form">
  <input type="hidden" name="id" id="id" th:value="${appointmentConfBean.id}">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">地址<span class="f-red">*</span></label>
      <div class="layui-input-block">
        <input type="text" lay-verify="required|repeatAddress" placeholder="请输入门店名称"
               name="address" id="address"
               th:value="${appointmentConfBean.address}"
               autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">门店名称<span class="f-red">*</span></label>
      <div class="layui-input-block">
        <input type="text" lay-verify="required|repeatName" placeholder="请输入门店名称"
               name="storeName" id="storeName"
               th:value="${appointmentConfBean.storeName}"
               autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">排序<span class="f-red">*</span></label>
      <div class="layui-input-block">
        <input type="text" lay-verify="required" placeholder="请输入排序"
               name="orderNum" id="orderNum"
               onkeyup="limitDigit(this)" onblur="limitDigit(this)"
               th:value="${appointmentConfBean.orderNum}"
               autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">是否启用</label>
      <div class="layui-input-inline">
        <input type="radio" name="active" value="1" title="启用" th:checked="${appointmentConfBean.active == 1}">
        <input type="radio" name="active" value="0" title="禁用" th:checked="${appointmentConfBean.active == 0}">
      </div>
    </div>
  </div>
  <div class="time-range">
    <button type="button" class="layui-btn layui-btn-xs time-add">添加时间段</button>
    <div class="time-col"
      th:each="appointmentPeriodTime,stat: ${appointmentConfBean.appointmentPeriodTimeBeanList}">
      <label class="time-label">预约时间段：</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input Wdate time-input"
               placeholder="开始时间" autocomplete="off"
               th:value="${appointmentPeriodTime.startTime}"
               name="appointmentPeriodTimeBeanList.startTime"
               onclick="WdatePicker({dateFmt: 'HH:mm'})">
      </div>
      <label style="margin: 0 5px">~</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input Wdate time-input"
               placeholder="结束时间" autocomplete="off"
               th:value="${appointmentPeriodTime.endTime}"
               name="appointmentPeriodTimeBeanList.endTime"
               onclick="WdatePicker({dateFmt: 'HH:mm'})">
      </div>
      <label style="margin: 0 5px">预约数：</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input time-input"
               placeholder="预约数" autocomplete="off"
               th:value="${appointmentPeriodTime.appointmentNum}"
               onkeyup="limitDigit(this)" onblur="limitDigit(this)"
               name="appointmentPeriodTimeBeanList.appointmentNum">
      </div>
      <div class="layui-input-inline" th:if="${stat.index > 0}">
        <i class="layui-icon time-del">&#x1006;</i>
      </div>
    </div>
  </div>
  <div class="layui-form-item" style="text-align: right;position: absolute;bottom: 5px; right: 10px">
    <button type="button" lay-submit="" lay-filter="save" class="layui-btn">保存</button>
    <button type="button" class="layui-btn layui-btn-primary" onclick="resetForm()">重置</button>
  </div>
</form>
<div id="timeRangeModel" style="display: none">
  <div class="time-col">
    <label class="time-label">预约时间段：</label>
    <div class="layui-input-inline">
      <input type="text" class="layui-input Wdate time-input"
             placeholder="开始时间" autocomplete="off"
             name="appointmentPeriodTimeBeanList.startTime"
             onclick="WdatePicker({dateFmt: 'HH:mm'})">
    </div>
    <label style="margin: 0 5px">~</label>
    <div class="layui-input-inline">
      <input type="text" class="layui-input Wdate time-input"
             placeholder="结束时间" autocomplete="off"
             name="appointmentPeriodTimeBeanList.endTime"
             onclick="WdatePicker({dateFmt: 'HH:mm'})">
    </div>
    <label style="margin: 0 5px">预约数：</label>
    <div class="layui-input-inline">
      <input type="text" class="layui-input time-input"
             placeholder="预约数" autocomplete="off"
             onkeyup="limitDigit(this)" onblur="limitDigit(this)"
             name="appointmentPeriodTimeBeanList.appointmentNum">
    </div>
    <div class="layui-input-inline">
      <i class="layui-icon time-del">&#x1006;</i>
    </div>
  </div>
</div>
<script>
  /*<![CDATA[*/
  $(document).on("click", ".time-del", function() {
    $(this).parents(".time-col").remove();
  });
  $(document).on("click", ".time-add", function () {
    var $timeRangeModel = $("#timeRangeModel").clone();
    $(".time-range").append($timeRangeModel.html());
    $(".time-range").scrollTop(9999999999999999);
  });
  var form;
  layui.use(['form'], function () {
    form = layui.form;
    var laydate = layui.laydate;

    $(".laydate").each(function () {
      laydate.render({
        elem: this
        , type: 'time'
        , format: 'H:m'
      });
    });

    form.verify({
      repeatAddress: function (value) {
        var formData = {
          value: value,
          tableName: "cm_appointment_conf",
          col: "address",
          primaryKey: "id",
          primaryKeyValue: $("#id").val()
        };
        var msg = "门店名称已经存在";
        return repeat(formData, msg);
      },
      repeatName: function (value) {
        var formData = {
          value: value,
          tableName: "cm_appointment_conf",
          col: "store_name",
          primaryKey: "id",
          primaryKeyValue: $("#id").val()
        };
        var msg = "门店名称已经存在";
        return repeat(formData, msg);
      }
    });

    form.on('submit(save)', function (data) {
      saveAndFlushAppointmentConf();
    });
  });

  function repeatTimeRange(startTimeArr, endTimeArr) {
    var begin = startTimeArr.sort();
    var over = endTimeArr.sort();
    for (var k = 1; k < begin.length; k++) {
      if (begin[k] < over[k - 1]) {
        return true;
      }
    }

    return false;
  }

  function saveAndFlushAppointmentConf() {
    var errorMsg = [];
    var startTimeArr = [];
    var endTimeArr = [];
    $(".time-range").find(".time-col").each(function (index, domEle) {
      var $startTime = $(this).find("[name$=startTime]");
      var $endTime = $(this).find("[name$=endTime]");
      var $appointmentNum = $(this).find("[name$=appointmentNum]");

      if ($startTime.val() != "" && $endTime.val() != "") {
        if (new Date("2010-10-01 " + $startTime.val() + ":00").getTime() >
          new Date("2010-10-01 " + $endTime.val() + ":00").getTime()) {
          errorMsg.push("第" + (index + 1) + "行的开始时间不能大于结束时间");
        } else {
          startTimeArr.push($startTime.val());
          endTimeArr.push($endTime.val());
          $startTime.attr("name", "appointmentPeriodTimeBeanList[" + index + "].startTime");
          $endTime.attr("name", "appointmentPeriodTimeBeanList[" + index + "].endTime");
        }

      } else if ($startTime.val() != "" && $endTime.val() == "") {
        errorMsg.push("第" + (index + 1) + "行的结束时间不能为空");
      } else if ($startTime.val() == "" && $endTime.val() != "") {
        errorMsg.push("第" + (index + 1) + "行的结束时间不能为空");
      }

      if ($appointmentNum.val() == "") {
        errorMsg.push("第" + (index + 1) + "行的预约量不能为空");
      } else {
        $appointmentNum.attr("name", "appointmentPeriodTimeBeanList[" + index + "].appointmentNum");
      }
    });

    if (errorMsg.length > 0) {
      layer.alert(errorMsg[0]);

      return;
    }

    if (startTimeArr.length == 0) {
      layer.alert("至少配置一个预约时间段");

      return;
    }
    if (repeatTimeRange(startTimeArr, endTimeArr)) {
      layer.alert("时间段存在重叠！");

      return;
    }

    if (errorMsg.length > 0) {
      layer.alert(errorMsg[0]);

      return;
    }

    var URL = path + "/appointment/conf/saveAndFlushAppointmentConf";
    var formData = $("#list_form").serializeArray();

    var load = layer.load();
    $.post(URL, formData, function (jsonData) {
      if (jsonData.flag) {
        layer.msg("保存成功", {icon: 1});
        setTimeout(function () {
          window.parent.listAppointmentConfByParams();
        }, 1000);
      } else {
        layer.msg("保存失败", {icon: 2});
        layer.close(load);
      }
    }, "json")
  }

  function resetForm() {
    $("#list_form")[0].reset();
  }

  /*]]>*/
</script>
</body>
</html>